﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<style type="text/css">
    .pager{
      display: inline-flex;
      margin-top: 10px;
    }
    .page-container{
    	text-align: center;
    }
    .pager>nav{
      display: flex; align-items: center; padding: 3px;
    }
    .pager>nav>button{
    	margin-left: 3px;
    }
    .pager>nav>ol[data-role="pageNumbers"]>li{
    	margin-left: 3px;
    	cursor: pointer;
    }
    .pager>nav>ol[data-role="pageNumbers"]{ display: flex; }
    .pager>nav>ol[data-role="pageNumbers"]>li.current{
		background-color: #5a98de;
		color: white;
    }
</style>
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<script type="text/javascript" src="./lib/angularJS/angular.min.js"></script>
<title>用户管理</title>
<style type="text/css">
	.table-border{
		border-top: 1px solid #5a98de;
	}
	.table-bordered th, .table-bordered td{
		border-color: #5a98de;
	}
</style>
</head>
<body ng-app="myApp" ng-controller="myCorl">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户管理 <span class="c-gray en">&gt;</span> 用户封禁 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="page-container">
		<div class="mt-20">
			<input type="text" class="btn btn-primary-outline radius" name="" ng-model="searchInfo"  placeholder="用户名" style="width:250px;margin-bottom: 10px;cursor: auto" class="input-text">
            <button style="margin-bottom: 10px" class="btn btn-primary-outline radius" type="submit" ng-click="submit(searchInfo);">
                <i class="Hui-iconfont">&#xe665;</i> 搜用户</button> 
			<table class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th width="30">ID</th>
						<th width="100">用户名</th>
						<th width="40">性别</th>
						<th width="50">头像</th>
						<th width="150">邮箱</th>
						<th width="50">信誉度</th>
						<th width="300">个性签名</th>
						<th width="70">状态</th>
						<th width="30">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c" ng-repeat="user in userinfo">
						<td>{{user.id}}</td>
						<td>{{user.username}}</td>
						<td>{{user.sex}}</td>
						<td><img width="50" ng-src="{{user.avatar}}" /></td></a></td>
						<td>{{user.email}}</td>
						<td>{{user.reputation}}</td>
						<td>{{user.remarks}}</td>
						<td class="td-status">
							<span class="label label-danger radius">封号中</span>
						</td>
						<td class="td-manage">
							<a style="text-decoration:none" ng-click="member_stop($event,user.id)" href="javascript:;" title="解封">
								<i class="Hui-iconfont">&#xe66b;</i>
							</a> 
						</td>
					</tr>
				</tbody>
			</table>
			<!-- <div class="pager"> </div> -->
		</div>
	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
	<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
	<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>

	<script src="./lib/pagejs/dom/index.js"></script>
  	<script src="./lib/pagejs/bom/index.js"></script>
  	<script src="./lib/pagejs/pager/index.js"></script>

	<script type="text/javascript">
		let app = angular.module('myApp', []);
		app.controller('myCorl',['$scope', '$http',function ($scope, $http) {
			$scope.currentPage = 0;
			let pager;
			let mt = document.querySelector('.mt-20')
			let information;
			$scope.submit = function(searchInfo){
				information = searchInfo
				$scope.httpFun(0)
			}
			$scope.httpFun = function(page){
				var page = page || 0 
				if(information){
					$http({
						method: 'GET',
						url: '..//Api/index.php?p=back&m=user&a=searchBlack',
						params: { 
							page,
						 	searchInfo : information
						} 
					}).then(function successCallback(response) {
						$scope.userinfo = response.data;
						$scope.pagerSelect(page+1);
						if($scope.userinfo.length === 0){
							$scope.httpFun($scope.currentPage-1,information);
						}
					})
					return
				}
				$http({
					method: 'GET',
					url: '../Api/index.php?p=back&m=user&a=userBlack',
					params: { 
					 	page
					} 
				}).then(function successCallback(response) {
					$scope.userinfo = response.data;
					$scope.pagerSelect(page+1);
					if($scope.userinfo.length === 0){
						$scope.httpFun($scope.currentPage-1,information);
					}
				}, function errorCallback(response) {
					console.log(response)
				});
			}
			$scope.httpFun($scope.currentPage);
			
			$scope.pagerFun = function(page,row){
				pager = document.createElement('div')
				pager.className = 'pager'
				mt.appendChild(pager)
			    new Pager({
			      element: pager,
			      currentPage: page,
			      totalPage: row,
			    })
			    let btn = document.querySelectorAll('.pager button')
			    btn.forEach(function(btn){
			    	btn.classList.add('btn','btn-primary-outline','radius')
			    })
			    let li = document.querySelectorAll('ol li')
			    li.forEach(function(li){
			    	li.classList.add('btn','btn-primary-outline','radius')
			    })
			    pager.addEventListener('pageChange', $scope.pageChange)
			}
			$scope.pageChange = function(e){
				$scope.currentPage = e.detail.page-1;
			    $scope.httpFun($scope.currentPage,information);
			}
			$scope.pagerSelect = function(page){
				if(information){
					$http({
						method: 'GET',
						url: '../Api/index.php?p=back&m=user&a=searchPagerBlack',
						params: { 
						 	searchInfo: information
						} 
					}).then(function successCallback(response) {
						let row = response.data;
						if($scope.currentPage == row){
							page = row
						}
						pager.removeEventListener('pageChange', $scope.pageChange)
		 				mt.removeChild(pager)
						$scope.pagerFun(page,parseInt(row));
					})
					return
				}
				$http({
					method: 'GET',
					url: '../Api/index.php?p=back&m=user&a=PagerBalck',
				}).then(function successCallback(response) {
					if(pager){
						pager.removeEventListener('pageChange', $scope.pageChange)
						mt.removeChild(pager)
					}
					let row = response.data;
					if($scope.currentPage == row){
						page = row
					}
					$scope.pagerFun(page,parseInt(row));
				})
			}

			$scope.member_stop = function (obj,id){
				layer.confirm('解封该用户？', {
					btn: ['解封','取消'], 
					shade: false,
					closeBtn: 0
				},
				function(){
					$http({
						method: 'GET',
						url: '../Api/index.php?p=back&m=user&a=userNoBan',
						params: { 
						 	id
						} 
					}).then(function successCallback(response) {
						if(response.data){
							$scope.httpFun($scope.currentPage,information);
							layer.msg('已解封', {icon:6,time:1000});
						}else{
							layer.msg('服务器异常，未能解封该用户', {icon:6,time:1000});
						}
					})
				});	
			}
		}])
	</script>
</body>
</html>